<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

    <!-- 公共头部引入 header.html -->
    <head th:replace="common/header"></head>
<body>

<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!--

    [详细标签看static/doc/shiro标签]

    拥有权限
        写法一：<shiro:hasPermission name="ac:list"></shiro:hasPermission>，包裹html标签
        写法二：<p shiro:hasPermission="ac:list"></p>
    拥有角色
        <p shiro:hasRole="user"></p>
        <p shiro:hasAnyRoles="user,admin"></p>

-->

<!-- 正文开始 -->
<div class="layui-fluid" style="overflow: auto">
        <div class="layui-fluid" style="overflow: auto">
            <div class="layui-card">
                <div class="layui-card-body">

                    <div class="layui-form toolbar" lay-filter="selFilter">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <!-- &emsp; -->
                                <label class="layui-form-label w-auto">系统名称:</label>
                                <div class="layui-input-inline mr0">
                                    <input type="text" id="name" value=""  placeholder="请输入系统名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <!-- &emsp; -->
                                <label class="layui-form-label w-auto">资源编码:</label>
                                <div class="layui-input-inline mr0">
                                    <input type="text" id="code" value=""  placeholder="请输入系统名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline mr0">
                                <button  class="layui-btn icon-btn" id="jointSearchButton" >
                                    <i class="layui-icon">&#xe615;</i>搜索
                                </button>
                                <button class="layui-btn icon-btn" id="jointReloadButton" style="color: white" >
                                    <i class="layui-icon">&#xe669;</i>重置
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- 表格-->
                    <div class="table_ma">
                        <!-- id用作数据表格的渲染，lay-filter是过滤器，用于监听事件 -->
                        <table id="jointTable" class="layui-hide" lay-filter="jointTable"></table>
                    </div>

                </div>
            </div>
        </div>

</div>


<!-- 工具栏 -->
<script type="text/html" id="bar">
    <a shiro:hasPermission="system:joint:editData" class="layui-btn layui-btn-xs layui-bg-blue" lay-event="edit">修改</a>
    <a shiro:hasPermission="system:joint:del" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<script type="text/html" id="heardLeftToolBar">
    <div class="layui-btn-container" >
        <button shiro:hasPermission="system:joint:addData" class="layui-btn layui-btn-sm layui-btn" lay-event="jointAddButton" style="color: white">
            <i class="layui-icon">&#xe654;</i>新增
        </button>
    </div>
</script>
<script type="text/html" id="status">
    <!--    状态(1.已启用,2.禁用)-->
    {{# var _status = d.status }}
    {{#  if(_status == 1){}}
    <span class="layui-badge layui-bg-green">已启用</span>
    {{# } if (_status==2) { }}
    <span class="layui-badge layui-bg-cyan">禁用</span>
    {{# } }}
</script>
<script type="text/html" id="link_state">
    <!--    状态(1.已启用,2.禁用)-->
    {{# var _link_state = d.link_state }}
    {{#  if(_link_state == 1){}}
    <span class="layui-badge layui-bg-green">离线</span>
    {{# } if (_link_state==2) { }}
    <span class="layui-badge layui-bg-cyan">在线</span>
    {{# } }}
</script>
<!-- js部分 -->
<script type="text/javascript" th:inline="javascript">

    layui.use(['layer', 'form','table','element','formSelects', 'admin','util','upload'], function () {
        var $ = layui.jquery
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var upload = layui.upload;


        /* 表格重载 */
        var tableIns =  table.render({
            elem:'#jointTable',
            url: '/platform/system/listData',
            even: true,//开启隔行背景
            id:'jointTable', //批量删除、审核时，点击事件选中表格
            method: 'post', //如果无需自定义HTTP类型，可不加该参数
            toolbar:'#heardLeftToolBar',	//表格头部工具栏区域
            cellMinWidth: 100,
            defaultToolbar: ['filter', 'print', 'exports'],	//自由配置头部工具栏右侧的图标
            page:true,
            height: 'full-160',
            cols: [[
                { checkbox: true, LAY_CHECKED: false ,fixed: true} //这里需要随便打点什么，不然thymeleaf报错
                //, { field: 'id', title: 'ID',width:100, align: 'center',sort: true, fixed: true}
                , { field: 'name', title: '名称', align: 'center',sort: true}
                , { field: 'code', title: '资源编码', align: 'center',sort: true}
                , { field: 'cert_cn', title: '证书编号', align: 'center',sort: true,templet:function(d){
                        var renderStr=d.cert_cn==null|| d.cert_cn==""?'00000000000':d.cert_cn;
                        return renderStr;
                    }}
                , { field: 'link_state', title: '连接状态', align: 'center',sort: true,templet: '#link_state'}
                , { field: 'link_time', title: '心跳时间', align: 'center',sort: true}
                , { field: 'url', title: '网络地址', align: 'center',sort: true}
                , { field: 'address', title: '平台地址', align: 'center',sort: true}
                // , { field: 'status', title: '状态',align: 'center',sort: true,templet: '#status'}
                , { fixed: 'right', title: '操作',align: 'center',toolbar: '#bar',width:200}
            ]],
            done: function(res, curr, count){
                if(401 === res.code || 403 === res.code){
                     layer.msg('登录已过期,请重新登陆!', {icon: 2, shade: 0.4 , time: 2000}, function () {
                         location.reload();
                     });
                }
            }
        });

        /* 高级搜索 */
        $("#jointSearchButton").click(function () {
            tableIns.reload({
                where: {
                    name: $("#name").val(),
                    code: $("#code").val(),
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        /* 重置 */
        $("#jointReloadButton").click(function (){
            $("#name").val("");
            $("#code").val("");
            form.render('select','selFilter');
            tableIns.reload({
                where: {
                    name: null,
                    code:null
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });



        /* 工具栏监听 */
        table.on('tool(jointTable)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var id = data.id; //获取id
            var status = data.status; //获取id
            if (layEvent === 'edit') {
                admin.open({
                    async:false,
                    cache:false,
                    type: 2,
                    title: '修改',
                    content: '/platform/system/edit?id='+id,
                        area: ['70%;', '80%;'],    //窗体大小（宽,高）
                    shadeClose: false, //开启点击弹窗区域外关闭弹窗
                    shade: 0.4,  //阴影度
                    maxmin: false,
                    resize:false,
                    success: function (layero, index) {
                        // 禁止出现滚动条
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    }
                });
            }
            if (layEvent === 'del') { //删除
                layer.confirm('确认删除?',{ icon: 3 },function (index) {
                    admin.ajax({
                        async:false,
                        cache:false,
                        url:'/platform/system/del',
                        type:'post',
                        data:{"id":id},
                        dataType:'json',
                        success:function (data) {
                            if(data.success){
                                layer.msg(data.msg,{icon:1,shade: 0.4,time:1500});
                                setTimeout('jointTable()',1500);
                            }else {
                                layer.msg(data.msg,{icon:2,shade: 0.4,time:1500});
                            }
                        },
                        error:function (data) {
                            layer.msg('网络异常，请稍后尝试!',{icon:2,shade: 0.4,time:1500});
                        }
                    });
                });
            }
        });
        //头工具栏事件 批量操作 第二种方式
        table.on('toolbar(jointTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            //var checkStatus = table.checkStatus('accountTable');	//与上面同效果
            var count = checkStatus.data.length;
            var data = checkStatus.data; //获取选中行的数据
            var userIds = new  Array();
            for (var i = 0; i < data.length; i++) {
                userIds.push(data[i].id);//获取选中行的真实id
            }
            // //批量删除
            // if(obj.event === 'sensitiveLotDel'){
            //     if (count > 0) {
            //         layer.confirm('确认删除执行?', { icon: 3 }, function (index) {
            //             admin.ajax({
            //                 async:false,
            //                 cache:false,
            //                 url:'/safety/sensitive/lotOperation',
            //                 type: "post",
            //                 data: {"ids":userIds},
            //                 traditional: true,
            //                 dataType:'json',
            //                 success: function (data) {
            //                     if (data.success) {
            //                         layer.msg(data.msg,{icon:1, shade: 0.4, time:1500});
            //                         setTimeout('jointTable()',1500);
            //                     }else{
            //                         layer.msg(data.msg,{icon:2, shade: 0.4, time:1500});
            //                     }
            //                 },
            //                 error: function (error) {
            //                     layer.msg("网络异常，请稍后尝试!", { icon: 2, shade: 0.4,time:1500});
            //                 }
            //             })
            //         });
            //     } else {
            //         layer.msg("请至少选择一条数据", { icon: 5, shade: 0.4, time: 1500 });
            //     }
            // }
            //添加
            if(obj.event === 'jointAddButton'){
                admin.open({
                    type: 2,
                    title: '新增',
                    content: '/platform/system/add',
                    area: ['70%;', '80%;'],     //窗体大小（宽,高）
                    shadeClose: false, //开启点击弹窗区域外关闭弹窗
                    shade: 0.4,  //阴影度
                    maxmin: false,
                    resize:false,
                    success: function (layero, index) {
                        // 禁止出现滚动条
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    }
                });
            }

        });
        /* 子页面调用重载表格,解决无数据时第一次添加成功后看不到数据的情况 */
        window.jointTable = function () {
            tableIns.reload({
                where: {
                    name: null,
                    code:null
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        }

    });
</script>
</body>
</html>